<template>
  <div class="player-container">
    <!-- openvidu选择框 -->
    <el-row>
      <el-select v-model="openviduSelect" @change="serversData" placeholder="请选择OpenVidu服务" class="aside-select">
        <el-option
          v-for="item in openviduInfo"
          :key="item.hostname"
          :value="item.hostname">
        </el-option>
      </el-select>
    </el-row>
    <el-divider/>
    <el-row>
      <el-col :span="4">
        <el-card :body-style="{ padding: '0px' }" v-for="item in recordings" :key="item.id">
          <img :src="item.url.replace('.mp4','.jpg')" class="image"/>
          <div style="padding: 14px;">
            <span class="card-title">{{item.name}}</span>
            <a target="_blank" :href="item.url" class="button" v-if="item.url">
              <el-button size="mini" icon="el-icon-download" />
            </a><br>
            <span class="card-title">{{ item.createdAt }}</span><br>
            <span class="card-title">时长：{{item.duration}}秒</span><br>
            <span class="card-title">大小：{{ item.size/1024 }} KB</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { ovinfoAll } from '@/api/openviduInfo'
import { listRecordings } from '@/api/record'

export default {

  data() {
    return {
      openviduSelect: null,
      openviduInfo: [],
      recordings:[]
    }
  },
  mounted() {
    this.search = this.$route.params.ovid
    this.list()
  },
  methods: {
    list() {
      return new Promise((resolve, reject) => {
        ovinfoAll({}).then(response => {
          const { success, data, message } = response;
          if (success) {
            this.openviduInfo = data
          }
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    serversData() {
      if (this.openviduSelect === undefined || this.openviduSelect === null) {
        return
      }
      return new Promise((resolve, reject) => {
        listRecordings({
          hostname: this.openviduSelect
        }).then(response => {
          const { success, data, message } = response;
          if (success) {
            this.recordings = data
          }
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>

<style type="scss">
  .player-container{
    margin: 30px;
  }
  .card-title {
    font-size: 13px;
    color: #999;
  }

  .image {
    width: 100%;
    display: block;
  }

</style>

